import React from "react";
import userAvatar from "../resource/user-avatar.png";
import "../pagesCss/UserProfileCss.css";

function UserProfile({ username, userAvatar, description }) {
  return (
    <aside className="sidebar">
      <div className="avatar-container">
        <img src={userAvatar} alt="User Avatar" className="avatar" />
      </div>
      <h1>{username}</h1>
      <button className="edit-profile-button">Edit profile</button>

      <div className="highlights">
        <h3>{description}</h3>
        <span className="highlight-tag"></span>
      </div>
    </aside>
  );
}

export default UserProfile;
